import { ConfirmParams } from './../../../component/primeng/confirm/confirm.module';
import { NavigateService } from './../../../service/navigate.service';
import { MdDialog } from "@angular/material";
import { ModifierService } from './../../../service/modifier.service';
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { CartService } from "../../../service/index";
import { MessageBoxService, MessageResult } from '../../../component/messageBoxService';
import { OrderMore, OrderMoreService } from "./../view/orderMore";
import { Modifier } from "../../../model/clerkDataContext";

export class OrderDetailService {
    static Current: OrderDetailService = new OrderDetailService();
    private orderDetail: OrderDetail;
    Regist(orderDetail: OrderDetail) {
        this.orderDetail = orderDetail;
    }
    /**
     * 打开商品dialog
     * @param  {} inventory
     */
    open(inventory, cartItems) {
        this.orderDetail.visible = true;
        this.orderDetail.inventory = inventory;
        this.orderDetail.cartItems = cartItems;
        this.orderDetail.onBeforeShow();
    }
    /**
     * 增加或者减少商品后，将操作后的商品赋值给dialog
     * @param  {} inventory
     */
    afterOperateInventory(inventory) {
        this.orderDetail.inventory = inventory;
    }

    updateCartItems(cartItems) {
        this.orderDetail.cartItems = cartItems;
    }

}

@Component({
    //moduleId: module.id,
    selector: 'div[order-detail]',
    template: `
        <div class="this-order" *ngIf="visible">
            <div class="order-this-order v-scroll">
                <div class="img-container">
                    <img src="{{inventory.pic ? inventory.pic : './assets/images/invt-default-pic.png'}}">
                    <!--<div id="dialog-back-btn" class="order-close-button padding-5 color-primary" (click)="cancel()">
                        <span class="fa-times-circle-o fa-2x"></span>
                    </div>-->
                </div>
                <div #scrollArea fxLayout="column" class="item-container">
                    <div fxLayout="column">
                        <div fxLayout="column" class="padding-5 this-order-border-bottom noshrink">
                            <div>{{inventory.name}}</div>
                            <div fxLayout="row" fxLayoutAlign="center end">
                                <span fxFlex="100%">{{inventory.price|currencySymbol}}</span>
                                <div fxLayout="row" fxLayoutAlign="center center" class="i-add-circle color-primary this-order-button noshrink" (click)="inventoryListAddToCart(inventory)"></div>
                            </div>
                        </div>
                        <div>
                            <div fxLayout="row" fxLayoutAlign="space-between center" class="pct100 padding-5 border-list" *ngFor="let item of cartItems; let itemIndex=index">
                                <div fxFlex="100%" fxLayout="column" (click)="onSetModifiers(item)">
                                    <div>#{{itemIndex+1}}</div>
                                    <div>{{item.price|currencySymbol}}</div>
                                    <div fxLayout="row" *ngIf="item.modifiers && item.modifiers.length">
                                        <div fxLayout="row" *ngFor="let modifier of item.modifiers">
                                            <div class="inventory-modifier-list padding-2" *ngFor="let option of modifier.options">{{option.name}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div fxLayout="row" fxLayoutAlign="center center">
                                    <button *ngIf="item&&item.qty==1" fxLayout="row" fxLayoutAlign="center center" (click)="deleteCartItem(item)">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="icon-delete-circle-o this-order-button "></div>
                                    </button>
                                    <button *ngIf="item&&item.qty>1" fxLayout="row" fxLayoutAlign="center center"(click)="minusCartItem(item)">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="icon-minus-circle-o this-order-button"></div>
                                    </button>
                                    <div>{{item.qty ? item.qty : ""}}</div>
                                    <button fxLayout="row" fxLayoutAlign="center center" (click)="addCartItem(item)">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="this-order-button icon-plus-circle-o"></div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['../order.component.scss'],
})
export class OrderDetail implements OnInit {

    constructor(
        private cartSvr: CartService,
        private msgSvr: MessageBoxService,
        private modSvr: ModifierService,
        private dialog: MdDialog,
        private elementRef: ElementRef,
        private navSvr: NavigateService
    ) {
        OrderDetailService.Current.Regist(this);
    }

    visible: boolean;
    inventory = {};
    cartItems = [];
    mask: any; //蒙层
    @ViewChild("scrollArea") scrollArea: ElementRef;

    @Output() onCartViewPlus = new EventEmitter();

    @Output() onCartViewMinus = new EventEmitter();

    @Output() onCartViewDelete = new EventEmitter();

    @Output() onInventoryListAddToCart = new EventEmitter();

    ngOnInit() {
        this.navSvr.registGoBack(this.goBack);
    }

    goBack() {
        let backBtn = document.getElementById("dialog-back-btn");
        if (backBtn) {
            backBtn.click();
        }
    }

    /**
     * 商品数量加一
     * @param  {} item
     */
    addCartItem(item) {
        this.onCartViewPlus.emit(item);
    }

    /**
     * 商品数量减一
     * @param  {} item
     */
    minusCartItem(item) {
        this.onCartViewMinus.emit(item);
    }

    async deleteCartItem(item) {
        let confirmParams: ConfirmParams = {
            title: "删除确认",
            content: "是否删除购物车项目【" + item.inventoryName + "】？"
        }
        let msgResult = await MessageBoxService.Current.Show(this.dialog, confirmParams);
        if (msgResult == MessageResult.Ok) {
            this.onCartViewDelete.emit(item);
            this.cartItems = this.cartSvr.QueryCartList({ inventoryId: (<any>this.inventory).id });
        }
    }

    inventoryListAddToCart(inventory) {
        this.onInventoryListAddToCart.emit(inventory);
    }

    async onSetModifiers(item) {
        let commonMods = await this.modSvr.getCommonMods();
        let result = await OrderMoreService.Current.Open(this.dialog, item, commonMods);
        this.navSvr.registGoBack(this.goBack);
    }

    cancel() {
        this.visible = false;
        if (this.mask && this.elementRef) {
            this.elementRef.nativeElement.parentElement.removeChild(this.mask);
            this.mask = null;
        }
    }

    scrollEnd() {
        if (this.scrollArea) {
            this.scrollArea.nativeElement.scrollIntoView({ block: "end", behavior: "smooth" });
        }
    }

    /**
     * 加载前添加蒙层
     */
    onBeforeShow() {
        if (this.mask) {
            return;
        }
        this.mask = document.createElement("div");
        this.mask.className = "order-mask";
        this.mask.addEventListener("click", () => {
            this.cancel();
        }, false);
        if (this.elementRef) {
            this.elementRef.nativeElement.parentElement.appendChild(this.mask);
        }
    }
}